import React from "react";

// 示例图片数据，可以替换为你的图片链接
const images = [
  {
    src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80",
    alt: "森林",
  },
  {
    src: "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80",
    alt: "山脉",
  },
  {
    src: "https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=400&q=80",
    alt: "湖泊",
  },
  {
    src: "https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=400&q=80",
    alt: "沙漠",
  },
  {
    src: "https://images.unsplash.com/photo-1465101178521-c1a9136a3b99?auto=format&fit=crop&w=400&q=80",
    alt: "城市",
  },
  {
    src: "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&q=80",
    alt: "夜景",
  },
];

const ImageGallery = ({ imageList = images }) => {
  return (
    <div className="p-4">
      <h2 className="text-2xl font-bold mb-4 text-center">图片集</h2>
      {/* Masonry 瀑布流布局 */}
      <div
        className="masonry-columns"
        style={{
          columnCount: 3,
          columnGap: '1rem',
        }}
      >
        {imageList.map((img, idx) => (
          <div
            key={idx}
            className="mb-4 break-inside-avoid overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 bg-white"
          >
            <img
              src={img.src}
              alt={img.alt}
              className="w-full object-cover transform hover:scale-105 transition-transform duration-300"
              style={{ display: 'block', width: '100%' }}
            />
            <div className="p-2 text-center text-gray-700 text-sm">{img.alt}</div>
          </div>
        ))}
      </div>
      {/* 响应式支持 */}
      <style>{`
        @media (max-width: 1024px) {
          .masonry-columns { column-count: 2; }
        }
        @media (max-width: 640px) {
          .masonry-columns { column-count: 1; }
        }
      `}</style>
    </div>
  );
};

export default ImageGallery;
